<template>
  <div ref="container"></div>
</template>

<script setup>
import { ref, watch } from 'vue';
import * as THREE from 'three';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
let props = defineProps({
  modelPath: String,
})
console.log(props.modelPath)
const container = ref(null);
watch(()=>props.modelPath, (newValue, oldValue) => {
  const scene = new THREE.Scene();
  const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
  const renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  container.value.appendChild(renderer.domElement);

  const loader = new GLTFLoader();
  loader.load(newValue, (gltf) => {
    console.log(newValue, gltf)
  // loader.load('path/to/your/model.gltf', (gltf) => {
    scene.add(gltf.scene);
  });

  camera.position.z = 5;

  const animate = function () {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
  };
  animate();
},{ deep: true })
  
</script>

<style>
  #container {
    width: 100%;
    height: 100%;
  }
</style>